import { Button, Table } from 'antd';
import type { ColumnsType } from 'antd/es/table';
import React, { useState } from 'react';
import type { TableRowSelection } from 'antd/es/table/interface';
import { Popconfirm, Space} from 'antd';
import {
  Form,
  Input,
} from 'antd';

//弹出表格
const NewForm = (props: any) => {
  const formData = [
    { name: 'batch', label: '批次单号', message: '请输入批次' },
    { name: 'breed', label: '批次等级', message: '请输入品种' },
    { name: 'grade', label: '鸡苗供应单位', message: '请输入等级' },
    { name: 'number', label: '转入单位', message: '请输入数量' },
    { name: 'weight', label: '转移时间', message: '请输入货物重量' },
    { name: 'specification', label: '备注', message: '请输入规格' }
  ];
  return (
    <Form ref={props.newref}>
      {formData.map((item) => (
        <Form.Item
          key={item.name}
          label={item.label}
          name={item.name}
          rules={[{ required: true, message: item.message }]}
        >
          <Input />
        </Form.Item>
      ))}
    </Form>
  );
};
//按钮组
const Buttons = (props: any) => (
  <>
    <Button type="primary" style={{ marginRight: 10 }} onClick={() => { props.add }}>新增计划</Button>
    <Button danger style={{ marginRight: 10 }}>批量删除</Button>
  </>
);

//表单组
interface DataType {
  key: React.Key;
  name: string;
  age: string;
  address: string;
  unit: string;
  time: string;
  remark: string;

}

const columns: ColumnsType<DataType> = [
  {
    title: '批次编号',
    dataIndex: 'name',
    width: 150,
  },
  {
    title: '批次等级',
    dataIndex: 'age',
  },
  {
    title: '鸡苗供应单位',
    dataIndex: 'address',
    width: 150,
  },
  {
    title: '转入单位',
    dataIndex: 'address',
    width: 150,
  },
  {
    title: '转移时间',
    dataIndex: 'time',
    width: 150,
  },
  {
    title: '转移经手人',
    dataIndex: 'unit',
    width: 150,
  },
  {
    title: '备注',
    dataIndex: 'remark',
    width: 150,
  },
  {
    title: '操作',
    dataIndex: 'operate',
    // fixed: 'right',
    width: 150,
    render: (_: any, record: { key: React.Key }) => (
      <Space>
        <a>详情</a>
        <a>编辑</a>
        <Popconfirm title="确定删除?" okText="确认" cancelText="取消">
          <a style={{ color: '#ff4d4f' }}>删除</a>
        </Popconfirm>

        <a onClick={(e) => e.preventDefault()}>···</a>

      </Space>
    ),
    fixed: 'right'

  },
];

const data: DataType[] = [];
for (let i = 0; i < 9; i++) {
  data.push({
    key: i,
    name: `01`,
    age: `一`,
    address: `某供应商`,
    unit: `某养殖单位`,
    time: `2022-3-12`,
    remark: `已完成`
  });
}

const App: React.FC = () => {

  const [selectedRowKeys, setSelectedRowKeys] = useState<React.Key[]>([]);

  function onSelectChange(newSelectedRowKeys: React.Key[]) {
    setSelectedRowKeys(newSelectedRowKeys);
  }

  const rowSelection: TableRowSelection<DataType> = {
    selectedRowKeys,
    //全选
    onChange: onSelectChange,
    //选项
    // selections: [

    // ],
  };

  return <Table rowSelection={rowSelection} columns={columns} dataSource={data} pagination={{ pageSize: 3 }} scroll={{ x: 1300 }} />;
};


function Index() {

  return (


    <div>
      {Buttons(prompt)}
      <span><App /></span>
      <NewForm />

    </div>

  )

}

export default Index
